<template>
    <div class="login">
        <m-header :canreturn=true :type="1" :titleText=titleText></m-header>
        <div class="loginbox">
            <div class="inputbox">
                <input type="text" maxlength='20' placeholder="请输入账号" ref="username" @keyup="changgeBtnStatus">
            </div>
            <div class="inputbox">
                <input type="password" maxlength='32' placeholder="请输入密码" ref="password" @keyup="changgeBtnStatus">
                <span class="s-pw" @click="showPassWord" :class="{active:textType === 'password'}"></span>
            </div>
            <div class="inputbox">
                <div class="btn" @click="userLogin">
                    <div class="bgbox default" :class="{ active:nameLength>0 && passwordLength>5}"> 登录</div>
                </div>
            </div>
            <div class="forget-register">
                <div @click="goNextPage('forgetpassword')">忘记密码?</div>
                <div @click="goNextPage('register')">注册账号</div>
            </div>
        </div>
        <transition name="slider">
            <router-view></router-view>
        </transition>
    </div>
</template>

<script type="text/ecmascript-6">
import MHeader from 'components/m-header/m-header';
import { postInfo } from '@/base/api/indexpage/getindexinfo';
import { setLocalStorage } from 'common/js/storage';
import { mapMutations } from 'vuex';

export default {
    data() {
        return {
            titleText: '账号登陆',
            username: '',
            password: '',
            nameLength: 0,
            passwordLength: 0,
            textType: '',
        };
    },
    methods: {
        backToMine() {
            this.$router.back(-1);
        },
        userLogin() {
            let username = this.$refs.username.value;
            let password = this.$refs.password.value;
            if (username.length < 4 || password.length < 6) {
                return;
            }
            const loginAddress = '/user/login';
            postInfo(loginAddress, {
                username,
                password,
                imei: plus.device.imei,
            }).then((res) => {
                console.log(res);
                if (res.status_code === 200) {
                    console.log('登录成功');
                    this.userLoginState();
                    setLocalStorage('token', res.token);
                    this.settoken(res.token);
                    this.$router.back(-1);
                } else {
                    plus.nativeUI.toast(res.message);
                }
            });
        },
        changgeBtnStatus() {
            this.nameLength = this.$refs.username.value.length;
            this.passwordLength = this.$refs.password.value.length;
            console.log(this.passwordLength);
        },
        goNextPage(val) {
            this.$router.push({
                path: '/login/' + val,
            });
        },
        showTips(content) {
            plus.nativeUI.toast(content);
        },
        showPassWord() {
            let passwordInput = this.$refs.password;
            this.textType = passwordInput.type;
            if (this.textType === 'text') {
                passwordInput.type = 'password';
            }
            if (this.textType === 'password') {
                passwordInput.type = 'text';
            }
        },
        ...mapMutations([
            'userLoginState',
            'settoken',
        ]),
    },
    components: {
        MHeader,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

.login {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background: $color-background;

    .loginbox {
        width: 100%;
        height: 100%;
        padding: 0 15px;
        box-sizing: border-box;

        .inputbox {
            width: 100%;
            height: 60px;
            background: #ffffff;
            margin-top: 20px;
            position: relative;

            input {
                outline: none;
                width: 100%;
                height: 100%;
                color: #777777;
                text-indent: 20px;
                font-size: $font-size-large;
                font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
            }

            .pretext {
                text-align: center;
                position: absolute;
                left: 25px;
                top: 50%;
                color: #ffffff;
                transform: translate3d(0, -50%, 0);
            }

            .s-pw {
                position: absolute;
                right: 25px;
                top: 50%;
                transform: translate3d(0, -50%, 0);
                width: 19px;
                height: 14px;
                bg-image('../../../common/image/y-e-n');
                background-size: 100% 100%;

                &.active {
                    bg-image('../../../common/image/y-e');
                }
            }

            .btn {
                width: 100%;
                height: 100%;
                line-height: 50px;
                text-align: center;
                font-size: $font-size-large;
                color: #ffffff;
                position: relative;

                .bgbox {
                    position: absolute;
                    left: 0;
                    top: 0;
                    width: 100%;
                    height: 100%;
                    line-height: 60px;
                    font-size: $font-size-large;
                    text-align: center;
                    font-size: $font-size-large;
                    color: #fefefe;
                    border-radius: 5px;

                    &.default {
                        background: #cccccc;
                    }

                    &.active {
                        background: #ffc400;
                    }
                }
            }
        }

        .forget-register {
            width: 100%;
            margin: 0 auto;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            // padding: 0 20px;
            box-sizing: border-box;
            color: #ffc400;
        }
    }

    .backicon {
        position: absolute;
        top: 20px;
        left: 20px;
        padding: 10px;

        .icon {
            display: block;
            height: 16px;
            width: 9px;
            bg-image('../../../common/image/back/back');
            background-size: 9px 16px;
            translate: sacle(1.5);
        }
    }

    .tciocon {
        margin-top: 20px;
        width: 60%;

        img {
            width: 100%;
            display: block;
        }
    }
}
</style>
